<template>
    <div>
        <licence-file-list
                ref="table"
                root-meta-url="/file/directory/personal-license"
                list-directory-url="/licence/personal/ls"
                :filter="filter"
                :mapper="mapper"
                search-key="licenceName"
                @upload-clicked="activeUploader"
                @mkdir-clicked="activeMkdir"
                @change-file-meta="activeChange"
                @change-dir-meta="activeDirChange"
        >
            <template slot="columns">
                <el-table-column label="姓名" width="70px" prop="holderName"></el-table-column>
                <el-table-column label="性别" width="60px" align="center">
                    <template slot-scope="{row}">
                        <span v-if="row['holderSex']===1">男</span>
                        <span v-else-if="row['holderSex']===2">女</span>
                    </template>
                </el-table-column>
                <el-table-column width="150px" label="资格类型" prop="licenceType"></el-table-column>
                <time-gap-column width="200px" label="有效时间" start-key="validStartingTime" end-key="validCutOffTime"></time-gap-column>
                <el-table-column label="证号" prop="licenceNumber">
                    <template slot-scope="{row}">
                        <span v-if="row['isDir']&&row.length">具有 {{row.length}} 个文件</span>
                        <span v-else-if="row.licenceNumber">{{row.licenceNumber}}</span>
                    </template>
                </el-table-column>
                <time-gap-column width="200px" label="复训时间段" start-key="retrainingStartTime" end-key="retrainingEndTime"></time-gap-column>
            </template>
        </licence-file-list>
        <make-dir ref="mkdir" @mkdir-success="freshTable"></make-dir>
        <dir-changer ref="dirChanger" @change-success="freshTable"></dir-changer>
        <personal-licence-upload ref="uploader" @upload-success="freshTable"></personal-licence-upload>
        <personal-licence-upload ref="changer" @upload-success="freshTable"></personal-licence-upload>
    </div>
</template>

<script>
    import LicenceFileList from "~/components/file-list/LicenceFileList";
    import TimeGapColumn from "~/components/file-list/table-columns/TimeGapColumn";
    import MakeDir from "~/components/file-list/MakeDir";
    import DirChanger from "~/components/file-list/DirChanger";
    import PersonalLicenceUpload from "~/components/file-list/licence-file-list/PersonalLicenceUpload";
    export default {
        name: "PersonalLicenceFileList",
        components: {PersonalLicenceUpload, TimeGapColumn, LicenceFileList,DirChanger,MakeDir},
        methods:{
            filter(v){
                return Boolean(v&&(v['holderName']||v['isDir']));
            },
            mapper(v){
                if(v['isDir']){
                    v['holderName'] = v.name;
                }
                return v;
            },
            activeDirChange(currentDir,targetDir){
                this.$refs.dirChanger.$emit("open",currentDir,targetDir);
            },
            freshTable(dir){
                this.$refs.table.$emit("reload-dir",dir);
            },
            activeMkdir(dir){
                this.$refs.mkdir.$emit("open",dir);
            },
            activeUploader(dir){
                this.$refs.uploader.$emit("open",dir);
            },
            activeChange(dir,file){
                this.$refs.changer.$emit("checkout",dir,file);
            },
        },
    }
</script>

<style scoped>
.table{
      display: block;
    overflow: auto;
    height: 70vh;
}
</style>
